import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:test1/xykk/app_page_view.dart';

import 'TimeSelector_logic.dart';

class TimeSelector<S> extends GetWidgetView<TimeSelectorLogic, S> {
  final String title; // 标题
  final List<String> options; // 选项
  final int initialIndex; // 默认选中项
  final Color activeColor; // 选中颜色
  final Color inactiveColor; // 未选中颜色
  final double TimeSelectorHeight; // 高
  final Function(int index, String value)? onChanged; // 回调
  TimeSelector({
    Key? key,
    required this.title,
    required this.options,
    this.initialIndex = 0,
    this.activeColor = const Color(0xFF8A5AF0),
    this.inactiveColor = const Color(0xFFBDBDBD),
    this.onChanged,
    this.TimeSelectorHeight = 120,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = controller;
    final state = controller.state!;
    final theme = Theme.of(context);
    final media = MediaQuery.of(context);

    return Container(
      height: TimeSelectorHeight,
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      decoration: BoxDecoration(
        color: Colors.grey,
        border: Border.all(color: Colors.blueAccent, width: 1),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题
          Text(
            title,
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
          ),
          const SizedBox(height: 20),

          // 选项
          Stack(
            children: [
              Positioned(
                left: 0,
                right: 0,
                // 线条垂直居中到小圆点的中心
                top: 32, // 注意这个值跟小圆点半径和字体高度有关
                child: Container(
                  margin: EdgeInsets.fromLTRB(16, 0, 16, 0),
                  height: 2,
                  color: Colors.grey.shade300,
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: List.generate(options.length, (index) {
                  return GestureDetector(
                    onTap: () => logic.onTap(index),
                    behavior: HitTestBehavior.opaque,
                    child: Column(
                      children: [
                        // 文本
                        ObxValue((data) {
                          return Text(
                            options[index],
                            style: TextStyle(
                              fontSize: 13,
                              color:  data== index ? activeColor : inactiveColor,
                            ),
                          );
                        }, logic.selectedIndex),
                        const SizedBox(height: 8),
                        // 小圆点
                        ObxValue((data) {
                          return   Container(
                            width: 14,
                            height: 14,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color:  data== index ? activeColor : inactiveColor,
                            ),
                          );
                        }, logic.selectedIndex),


                      ],
                    ),
                  );
                }),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
